<template>
    <div class="app-container" style="height: 100vh">
        <el-tabs type="card" v-model="activeName" @tab-remove="handleTabRemove">
            <el-tab-pane label="首页" name="first">
                <template #label>
                  <div>
                    <el-space>
                      <el-icon><Menu/></el-icon>
                      <span>首页</span>
                    </el-space>
                  </div>
                </template>
                <Connection @open-tab="openTab"/>
            </el-tab-pane>
            <el-tab-pane closable :lazy="true" v-for="(tab, index) in tabList" :key="index" :label="tab.name"
                         :name="tab.name">
                <Etcd2 v-if="tab.version==='v2'" :connect="tab"/>
                <Etcd3 v-if="tab.version==='v3'" :connect="tab"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import {reactive, ref, toRefs} from "vue";
import Connection from '@/components/Connection.vue'
import Etcd2 from '@/components/etcd2/Etcd.vue'
import Etcd3 from '@/components/etcd3/Etcd.vue'
import Element from "@/view/Element.vue";
import {cluster_version, native_cluster_version, native_stats_self, stats_self} from "@/api/etcd2.js";
import {ElMessage, ElMessageBox} from 'element-plus'
import {JsHelper} from "@/utils/js-helper.js"

// 变量
const activeName = ref('first')
const tabList = ref([])

// 函数
function handleClick(tab) {
    console.log(tab, event);
}

function handleTabRemove(tab) {
    console.log('tab', tab)
    tabList.value = tabList.value.filter(x => x.name !== tab);
    if (tabList.value.length === 0) {
        activeName.value = 'first'
    } else {
        let index = tabList.value.length - 1;
        activeName.value = tabList.value[index].name;
    }
    console.log(tabList.value)
}

function openTab(file) {
    let uri = JsHelper.http.currentUrl();
    let value = JsHelper.http.parameter(uri,'name');
    console.log('url path',JsHelper.http.pathname(uri))
    console.log('url value',value)
    var targetName = file.name;
    let targetTab = tabList.value.filter(x => x.name === targetName);
    if (targetTab && targetTab.length > 0) {
        activeName.value = targetName;
        return;
    }
    // 确认集群正常
    let url = file.url;
    let version = 'v2';
    let auth = {username: file.username, password: file.password};
    native_cluster_version(url).then(res => {
        tryVersion(file);
    }).catch(error => {
        ElMessage.error(url + ' : Etcd connect fail, '+error.message)
    })
}

function tryVersion(file) {
    let url = file.url;
    let version = 'v2';
    let auth = {username: file.username, password: file.password};
    let tab = {
        name: file.name,
        url: file.url,
        username: 'root',
        password: '123456',
    };
    native_stats_self(url)
        .then(res => {
            let etcdcluster = res.data.etcdcluster;
            if(etcdcluster.startsWith("3")){
                throw "etcd@v3";
            }
            tab.version = 'v2'
            tabList.value.push(tab)
            activeName.value = tab.name;
        })
        .catch(error => {
            tab.version = 'v3'
            tabList.value.push(tab)
            activeName.value = tab.name;
        })
}
</script>

<style scoped>
.el-tabs__header {
    border-bottom: none; /* 去除原有的底部边框 */
    display: flex;
    align-items: center;
}

.el-tabs__item {
    margin-right: 20px;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    background-color: #f5f5f5;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative; /* 为添加分割线设置相对定位 */
}

.el-tabs__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -10px; /* 调整分割线位置 */
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: black; /* 设置分割线颜色为黑色 */
}

.el-tabs__item.is-active {
    background-color: white;
    color: #409EFF;
    border-bottom: 2px solid #409EFF;
    font-weight: bold;
}

.tab-content {
    min-height: 200px;
}
</style>